<template>
  <div id="bigbox">
    <div id="container" style="width: 100%; height: 90vh"></div>

    <!-- 底部选项栏 -->
    <mt-tabbar
      v-model="selected"
      style="width: 100%; height: 13vh; z-index: 999"
    >
      <mt-tab-item id="index">
        <img slot="icon" src="../assets/images/app/home.png" />
        首页
      </mt-tab-item>
      <mt-tab-item id="map">
        <img slot="icon" src="../assets/images/app/map.png" />
      </mt-tab-item>
      <mt-tab-item id="me">
        <img slot="icon" src="../assets/images/app/wode.png" />
        我的
      </mt-tab-item>
    </mt-tabbar>
  </div>
</template>

<script>
import AMapLoader from "@amap/amap-jsapi-loader";
window._AMapSecurityConfig = {
  securityJsCode: "d397e24bab790d0ae2f259dc630a3058",
};
export default {
  methods: {
    // 连接socket
    // connect() {
    //   this.$socket.open(); // 开始连接socket
    //   // 仅在组件内订阅事件
    //   this.sockets.subscribe("welcome", (data) => {
    //     console.log("welcome data ", data);
    //   });
    // },
    // sendMessage() {
    //   this.$socket.emit("hello", " 客户端");
    // },
  },
  // sockets: {
  //   //
  //   welcome: (data) => {
  //     console.log("welcome data ", data);
  //   },
  // },

  /**/
  mounted() {
    AMapLoader.load({
      key: "da7a5711aac308d55f1aa8c89fe1eeb8",
      version: "2.0",
      plugins: ["AMap.ToolBar", "AMap.PlaceSearch"],
    }).then((AMap) => {
      let lng = 119.98523231202;
      let lat = 30.149777075527;
      // 将地图显示在#container的div中
      let map = new AMap.Map("container", { viewMode: "3D" });

      // console.log(map);
      map.setCenter([lng, lat]); //中心点
      map.setZoom(17); //缩放级别
      map.addControl(new AMap.ToolBar());

      // 同时引入工具条插件，比例尺插件和鹰眼插件
      AMap.plugin(
        [
          "AMap.ToolBar",
          "AMap.Scale",
          "AMap.HawkEye",
          "AMap.MapType",
          "AMap.Geolocation",
        ],
        function () {
          // 在图面添加工具条控件，工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
          map.addControl(new AMap.ToolBar());

          // 在图面添加比例尺控件，展示地图在当前层级和纬度下的比例尺
          map.addControl(new AMap.Scale());

          // 在图面添加鹰眼控件，在地图右下角显示地图的缩略图
          map.addControl(new AMap.HawkEye({ isOpen: true }));

          // 在图面添加类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制
          // map.addControl(new AMap.MapType());

          // 在图面添加定位控件，用来获取和展示用户主机所在的经纬度位置
          map.addControl(
            new AMap.Geolocation({ position: "LB", offset: [15, 60] })
          );
        }
      );

      let socket = io("http://localhost:3001");
      /**开始调用自定义函数 */
      // console.log(this.yigepen);
      this.fangfa.selectData(1, this, map);

      setInterval(() => {
        // console.log(this);

        socket.emit("textmsg", "快快更新数据库");
        socket.on("textmsg", function (data) {
          console.log("服务端" + data);
        });

        this.fangfa.selectData(1, this, map);
      }, 5000);
      // setTimeout(() => {
      //   console.log(this.yigepen);
      // }, 500);
      // this.connect();
      // this.sendMessage();
      // console.log(socket);
      // socket.on("textmsg", function (data) {
      //   console.log("服务端说" + data);
      // });
    });
  },

  /* */
  data() {
    return {
      purl: [
        "小熊猫",
        "熊猫",
        "熊",
        "兔",
        "豹",
        "象",
        "斑马",
        "袋鼠",
        "龟",
        "鳄",
        "鹤",
        "黑天鹅",
        "猴",
        "虎",
        "火烈鸟",
        "孔雀",
        "狼",
        "虎",
        "鼠",
        "马",
        "狮",
        "白天鹅",
        "鸵",
        "蛙",
        "犀",
        "蜥",
        "猩猩",
        "羊",
        "长颈鹿",
        "鹳",
        "鹊",
      ],
      selected: "map",
      yigepen: null,
      picurl: null,
      fangfa: {
        selectData(aid, _this, _map) {
          let url = `http://localhost:3000/v1/animal/animalselect`;
          let pramas = `aid=${aid}`;
          // console.log(this);
          _this.axios
            .post(url, pramas)
            .then((res) => {
              _this.yigepen = res.data;
              // console.log(_this.yigepen);
            })
            .then(() => {
              // console.log(_this.yigepen);
              _this.yigepen.forEach((item) => {
                // console.log(e.race);
                /*生成图标 */
                let race = item.race;
                this.strOfRace(race, _this.purl).then((e) => {
                  // console.log(e.msg);
                  // console.log(this);
                  var icon = new AMap.Icon({
                    size: new AMap.Size(20, 20), // 图标尺寸
                    image: `${e.msg}`, // Icon的图像
                    // imageOffset: new AMap.Pixel(0, -60),  // 图像相对展示区域的偏移量，适于雪碧图等
                    imageSize: new AMap.Size(20, 20), // 根据所设置的大小拉伸或压缩图片
                  });
                  /*添加标记 */
                  // console.log(item);
                  let marker = new AMap.Marker({
                    position: [item.longitude, item.latitude],
                    icon: icon,
                    offset: new AMap.Pixel(-10, -10),
                    zoom: 13,
                  });
                  _map.add(marker);

                  marker.on("click", function (e) {
                    let infoWindow = new AMap.InfoWindow({
                      isCustom: true,
                      content: `<div style="border:1px solid black; padding:10px;background:#fff;  border-radius: 15px;
;" >
          <p>学名:${item.race}</p>
          <p>姓名:${item.aname}</p>
          <p>年龄:${item.age}</p>
          <p>心率:${item.rate}</p>
          <p>健康状况:${item.status}</p>
        </div>`,
                      offset: new AMap.Pixel(16, -30),
                    });
                    // console.log(infoWindow);
                    // 在地图中标记点旁边，打开infoWindow窗口
                    infoWindow.open(_map, e.target.getPosition());
                  });
                });
              });
            });
        },

        strOfRace(_race, _purl) {
          return new Promise((resolve) => {
            _purl.forEach((e) => {
              let n = _race.indexOf(e);
              n != -1 ? resolve({ n, msg: `/${e}.png` }) : 1;
              // :  reject({ n, msg: "无" });
            });
          });
        },
      },
    };
  },

  /**/
};
</script>

<style lang="scss" scoped>
#bigbox {
  display: flex;
  flex-direction: column;
  height: 100vh;
  user-select: none;

  :deep().mint-tab-item-icon {
    width: 40px;
    height: 40px;
    margin: 9px auto 5px;
  }
}
</style>